<template>
    <div id="tab-search">
        <div class="container">
            <div class="page-header">
                <h1>搜索结果： <small>{{keyword != null ? keyword : '全部'}}</small></h1>
            </div>
            <div v-if="goods.length > 0" class="waterfall">
                <div class="thumbnail" v-for="(good, id) in goods">
                    <img :src="parseImage(good.image)" :alt="good.name">
                    <div class="caption" width="200px">
                        <h3>{{good.name}}</h3>
                        <h4>¥{{good.price}}.00</h4>
                        <p><span class="label label-info">简介</span> {{good.description}}</p>
                        <p><span class="label label-warning">类别</span> {{good.category}}</p>
                        <p><span class="label label-success">库存</span> 剩余 {{good.storage }} 件</p>
                        <p class="text-right">
                            <!-- <a href="#" class="btn btn-default" role="button" @click="showPurchaseModal(good.gid, index)">立即购买</a> -->
                            <a href="#" class="btn btn-primary" role="button" @click="showCartModal(good.id)">加入购物车</a>
                        </p>
                    </div>
                </div>
            </div>
            <div v-else style="text-align: center;">
                <img src="../assets/svg/undraw_page_not_found_re_e9o6.svg" height="300">
                <h2 style="margin: 50px auto 100px auto;">没有找到相关商品噢! 换个关键词试试吧!</h2>
            </div>
        </div>

        <div id="tab-search-warning" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">提示</h4>
                    </div>
                    <div class="modal-body">
                        ...
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- Search Tab End -->
</template>

<script>
import axios from "axios";

export default {
    name:'search',
    data:function(){
        return{
            keyword: this.$route.params.keyword,
            goods: this.$store.state.search
        }
    },
    methods:{
        showCartModal(gid){
            if(this.$store.state.user != null){
                this.$axios.post(
                '/cart/add',
                this.$qs.stringify({
                   cartId: this.$store.state.cart.id,
                   commodityId: gid
                })
                ).then((res) => {
                    console.log('/cart/add' + ' 获取成功...')
                    console.log(res.data)
                    if(res.data){
                        alert("成功加入购物车")
                    }
                }).catch(function (error) {
                    console.log('/cart/add 获取失败...')
                    console.log(error)
                })
            }else{
                alert("你还没有登录账号，请先登录")
                this.$router.push({name:'login'})
            }

        },
        parseImage: function (name) {
            return axios.defaults.baseURL + '/images/' + name + '.png'
        }
    }
}
</script>

<style scoped>
#tab-search .waterfall {
  width: 100%;
  columns: 3;
  column-gap: 30px;
}
#tab-search .thumbnail {
  break-inside: avoid;
  margin-bottom: 30px;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
#tab-search .thumbnail img {
  margin-top: 40px;
  border-radius: 10px;
}
#tab-search .thumbnail h3 {
  padding: 8px 0;
  margin-left: 10px;
}
#tab-search .thumbnail h4 {
  margin-left: 20px;
  font-weight: 600;
  color: #6464ff;
}
#tab-search .thumbnail p {
  color: #555;
  margin-left: 10px;
}
#tab-search .thumbnail a {
  margin-top: 30px;
  margin-right: 10px;
}

</style>
